<template>
	<view class="configuration">
		<view class="uni-px-5 uni-pb-5">
			<view class="text">神职</view>
			<view class="checkbox">
				<uni-data-checkbox :disabled="gameStatusControl" multiple v-model="priesthoodList"
					:localdata="priesthoodMap">
				</uni-data-checkbox>
			</view>
		</view>
		<view class="uni-px-5 uni-pb-5">
			<view class="text">普通狼人</view>
			<view class="checkbox">
				<uni-number-box min="3" max="5" :disabled="gameStatusControl" v-model="werewolf1Num" />
			</view>
		</view>
		<view class="uni-px-5 uni-pb-5">
			<view class="text">特殊狼人</view>
			<view class="checkbox">
				<uni-data-checkbox multiple :disabled="gameStatusControl" v-model="werewolfList2"
					:localdata="werewolfMap">
				</uni-data-checkbox>
			</view>
		</view>
		<view class="uni-px-5 uni-pb-5">
			<view class="text">平民</view>
			<view class="checkbox">
				<uni-number-box min="3" max="5" :disabled="gameStatusControl" v-model="villagerNum"/>
			</view>

		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from "@/store/helper/dm"
	export default {
		prop: [],
		data() {
			return {
				priesthoodList: [],
				werewolfList1: [],
				werewolfList2: [],
				villagerList: [],
				priesthoodMap: [{
					text: '预言家',
					value: 'seer'
				}, {
					text: '女巫',
					value: 'witch'
				}, {
					text: '猎人',
					value: 'hunter'
				}, {
					text: '丘比特',
					value: 'cupid'
				}, {
					text: '白痴',
					value: 'bc'
				}, {
					text: '守卫',
					value: 'guarder'
				}],
				priesthood: [],
				werewolf1Num: 4,
				werewolf2: [],
				werewolfMap: [{
					text: '白狼王',
					value: 'white_wolf_king'
				}, {
					text: '狼王',
					value: 'wolf_king'
				}, {
					text: '狼美人',
					value: 'wolf_beauty'
				}],
				villagerNum: 4,
				gameNum: 12,
				gameRoleList: [],
				gameRoleListConfirm: [],
				gameRoleSettings: []
			}
		},
		methods: {
			...mapMutations([
				"setCurrentGameRoleList",
				"setCurrentGameRoleListConfirm",
				"setCurrentGameRoleParams"
			])
		},
		onLoad() {

		},
		computed: {
			gameStatusControl() {
				this.gameStatus === "init" && this.user.type === "dm" ? false : true
			},
			gameRoleListChange() {
				const {
					priesthoodList,
					werewolf1Num,
					werewolfList2,
					villagerNum
				} = this
				return {
					priesthoodList,
					werewolf1Num,
					werewolfList2,
					villagerNum
				}
			},
			...mapState([
				"user",
				"currentGameID",
				"gameStatus",
				"gamePlayers",
				"currentGameRoleList",
				"currentGameRoleListConfirm",
			])
		},
		watch: {
			gameRoleListChange: {
				handler() {
					this.gameRoleList.splice(0)
					this.werewolfList1.splice(0)
					this.villagerList.splice(0)
					this.priesthood.splice(0)
					this.werewolf2.splice(0)
					this.gameRoleSettings.splice(0)
					this.gameRoleListConfirm.splice(0)
					for (let i = 0; i < this.werewolf1Num; i++) {
						this.werewolfList1.push('werewolf')
						this.gameRoleListConfirm.push('普通狼人')
					}
					for (let i = 0; i < this.villagerNum; i++) {
						this.villagerList.push('villager')
						this.gameRoleListConfirm.push('平民')
					}
					//角色列表拼接
					this.gameRoleList = this.gameRoleList.concat(this.priesthoodList).concat(this.werewolfList1).concat(
						this.werewolfList2).concat(this.villagerList)
					this.setCurrentGameRoleList(this.gameRoleList)
					//角色列表确认名单拼接	
					//json参数拼接
					for (let i = 0; i < this.priesthoodList.length; i++) {
						this.gameRoleSettings.push({
							code: this.priesthoodList[i],
							count: 1,
							type: "priesthood"
						})
						var confirm1 = this.priesthoodMap.filter(n => {
							return n.value == this.priesthoodList[i]
						})
						this.gameRoleListConfirm = this.gameRoleListConfirm.concat(confirm1[0].text)
					}
					for (let j = 0; j < this.werewolfList2.length; j++) {
						this.gameRoleSettings.push({
							code: this.werewolfList2[j],
							count: 1,
							type: "werewolf"
						})
						var confirm2 = this.werewolfMap.filter(n => {
							return n.value == this.werewolfList2[j]
						})
						this.gameRoleListConfirm = this.gameRoleListConfirm.concat(confirm2[0].text)
					}
					this.setCurrentGameRoleListConfirm(this.gameRoleListConfirm)
					this.gameRoleSettings.push({
						code: "werewolf",
						count: this.werewolf1Num,
						type: "werewolf"
					},{
						code: "villager",
						count: this.villagerNum,
						type: "villager"
					})
					this.setCurrentGameRoleParams(this.gameRoleSettings)
				},
				deep: true,
				immediate:true,
			}
		}
	}
</script>

<style>
	.configuration {
		margin: 10px 0;
	}

	.checkbox {
		margin: 10px;
	}

	.text {
		font-size: 16px;
		font-weight: 700;
		color: #007aff;
		margin: 10px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}
</style>
